import { useMemo } from 'react'
import { ScrollView } from '@tarojs/components'
import classNames from 'classnames'
import dayjs from 'dayjs'
import styles from './index.module.less'
import { getSeatPrice, getSubDesc } from '@/common/utils'
import { useMovieStore } from '@/common/hox/movieStore'
import { Close} from '@nutui/icons-react-taro'

function Tickets(_props: {}) {
  const {
    movie: { movieDetail },
    schedule: { scheduleDetail,scheduleSeatInfo },
    seat: { seatList, handleClickSeats },
    coupon: { couponList },
  } = useMovieStore(store => [
    store.movie.movieDetail,
    store.seat,
    store.schedule.scheduleDetail,
    store.schedule.scheduleSeatInfo,
    store.coupon.couponList,
    store.combination.combinationInfo
  ])
  
  const scheduleDesc = useMemo(() => {
    if (!scheduleDetail) return
    const { showDate, showTime, duration } = scheduleDetail
    let res = `${getSubDesc(showDate)} ${dayjs(showTime).format('HH:mm')}`
    if (duration && duration > 0) {
      res += ` ~ ${dayjs(showTime).add(duration, 'minutes').format('HH:mm')}`
    }
    return res
  }, [scheduleDetail])

  const couponStrList = useMemo(() => ([... new Set(couponList.map(item => `${item.useThreshold ? '满' + item.useThreshold : ''}减${item.batchValue}`))].slice(0, 2)), [couponList])

  if (!movieDetail) return null

  return (
    <div className={classNames(styles.tickets, styles.card)}>
      <div className={styles.header}>
        <div className={styles.movieTitle}>{movieDetail.name}</div>
        {couponStrList?.filter(Boolean).map((item, index) => {
          return <div key={index} className={styles.couponInfo}>券 | {item}</div>
        })}
      </div>
      <div className={styles.scheduleDesc}>
        {scheduleDesc}
        {scheduleDetail?.showVersionType && <span className={styles.mark}>{decodeURIComponent(scheduleDetail?.showVersionType)}</span>}
      </div>
      <ScrollView scrollX>
        <div className={styles.ticketList}>
          {seatList.map((item) => { 
            const { seatId, seatNo } = item
            const { sellPrice } = getSeatPrice(item, couponStrList.length > 0 || (scheduleSeatInfo?.hasCoupon !== undefined && scheduleSeatInfo?.hasCoupon))
            return (
              <div className={styles.ticketItem} key={seatId}>
                <div className={styles.text}>
                  <div className={styles.seatNo}>{seatNo}</div>
                  <div className={styles.price}>￥{sellPrice}</div>
                </div>
                <div className={styles.line} />
                <Close color="var(--color-main)" size="10px" className={styles.delete} onClick={() => handleClickSeats([item])}/>
              </div>
            )
          })}
        </div>
      </ScrollView>
    </div>
  )
}

export default Tickets